/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */


<template>
  <div :class="['content', onePageVis ? 'hide' : 'show']">
    <ul class="main">
      <li class="col">
        <div class="cell">
          <Users :family="family"></Users>
        </div>
        <div class="cell">
          <HouseType :house="house"></HouseType>
        </div>
        <div class="cell">
          <Money :money="money"></Money>
        </div>
      </li>
      <li class="col">
        <div class="cell">
          <YearPlan title="项目签约进度(户)" :chartData="schedule" :selecte="true"></YearPlan>
        </div>
        <div class="cell">
          <Compensation :compenstation="compenstation"></Compensation>
        </div>
        <div class="cell">
          <NaowuRank :laowuRank="laowuRank"></NaowuRank>
        </div>
      </li>
      <li class="col">
        <div class="cell">
          <MoneyTypes :moneyType="moneyType"></MoneyTypes>
        </div>
        <div class="cell">
          <CompensationPrice :avgPrice="avgPrice"></CompensationPrice>
        </div>
        <div class="cell">
          <MoneySpeed :moneySpeed="moneySpeed" :selecte="true"></MoneySpeed>
          <!-- <PayMonth></PayMonth> -->
          <!-- <YearPlan :monthPay="monthPay" title="项目资金进度(万元)" :chartData="moneyScheduleCharData"></YearPlan> -->
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import {
  reqScreenFamily,
  reqScreenHouse,
  reqScreenMoney,
  reqScreenSchedule,
  reqScreenCompensation,
  reqScreenLaowuRank,
  reqScreenArea,
  reqScreenThirdCom,
  reqScreenMonthPay,
  reqAvgPrice,
  reqMoneyType,
  reqSignSpeed,
  reqMoneySpeed,
  reqSignSpeedDay,
  reqMoneySpeedDay
} from "../../api/index.js";
import Users from "../../components/chartComponent/Users"; //征收户数统计
import Areas from "../../components/chartComponent/Areas"; //征收面积统计
import HouseType from "../../components/chartComponent/HouseType"; //征收房屋类型统计
import Money from "../../components/chartComponent/Money"; //资金统计
import YearPlan from "../../components/chartComponent/YearPlan"; //全年进度
import Compensation from "../../components/chartComponent/Compensation"; //补偿方式
import NaowuRank from "../../components/chartComponent/NaowuRank"; //劳务排名
import ThirdCom from "../../components/chartComponent/thirdCom"; //第三方机构
import PayMonth from "../../components/chartComponent/payMonth"; //每月支付进度
import CompensationPrice from "../../components/chartComponent/CompensationPrice"; //补偿均价
import MoneyTypes from "../../components/chartComponent/MoneyTypes"; //项目资金分类
import MoneySpeed from "../../components/chartComponent/MoneySpeed"; //资金进度
export default {
  props: {
    onePageVis: Boolean
  },
  data() {
    return {
      yearPlanChartData: [],
      moneyScheduleCharData: [],
      family: {}, //户数信息
      house: {}, // 房屋类型
      money: {}, // 资金状况
      schedule: {}, // 项目进度
      compenstation: {}, // 补偿方式
      laowuRank: [], // 劳务排名
      area: {}, // 面积信息
      thirdCom: {}, // 第三方机构信息
      monthPay: {}, // 每月支出情况
      avgPrice: {}, //补偿均价
      moneyType: {}, //资金分类
      moneySpeed: {} //项目资金进度
    };
  },
  methods: {
    async reqData(name, getAjax) {
      const self = this;
      let data = await getAjax({
        seqno: self.$router.history.current.query.seqno
      });
      if (data.code === 1) {
        this[name] = data.data;
      } else {
        console.log(name + ":数据获取失败!");
      }
    },
    reqAllData() {
      this.reqData("family", reqScreenFamily); // 户数信息
      this.reqData("house", reqScreenHouse); // 房屋类型
      this.reqData("money", reqScreenMoney); // 资金状况
      this.reqData("schedule", reqSignSpeedDay); // 项目签约进度
      this.reqData("compenstation", reqScreenCompensation); // 补偿方式
      this.reqData("laowuRank", reqScreenLaowuRank); // 劳务排名
      this.reqData("area", reqScreenArea); // 面积信息
      this.reqData("thirdCom", reqScreenThirdCom); // 第三方机构信息
      this.reqData("monthPay", reqScreenMonthPay); // 每月支出情况
      this.reqData("avgPrice", reqAvgPrice); // 每月支出情况
      this.reqData("moneyType", reqMoneyType); // 资金分类
      this.reqData("moneySpeed", reqMoneySpeedDay); // 资金分类
    }
  },
  mounted() {
    this.reqAllData();
  },
  components: {
    Users,
    Areas,
    HouseType,
    Money,
    YearPlan,
    Compensation,
    NaowuRank,
    ThirdCom,
    PayMonth,
    CompensationPrice,
    MoneyTypes,
    MoneySpeed
  }
};
</script>

<style lang='less' scoped>
@import "../../utils/theme.less";

.content {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 10;
  padding: 20vh 10vw 5vw;
  box-sizing: border-box;
  transition: transform ease-out 0.6s;
  .main {
    width: 100%;
    height: 100%;
    background-color: rgba(33, 33, 33, 0.8);
    .col {
      display: inline-block;
      width: 33.3333%;
      height: 100%;
      box-sizing: border-box;
      float: left;
      .cell {
        width: 100%;
        height: 33.333%;
        box-sizing: border-box;
        padding: 0.5vw;
        position: relative;
      }
    }
  }
}

.hide {
  transform: translate3d(100%, 0, 0px);
}

.show {
  transform: translate3d(0px, 0px, 0px);
}
</style>
